<template>
	<view class="box">
		<u-button class="button" type="primary" :plain="true" :text="activeUser.name ? activeUser.name : '选择'" size="small" @click="clickOpen"></u-button>
		<u-picker :show="show" ref="uPicker" keyName="name" :loading="loading" :columns="columns" @change="changeHandler" @confirm="confirm" @cancel="clickcancel"></u-picker>
	</view>
</template>

<script>
	import {getDeptSimpleList} from '@/api/user/deptApi'
	import {oaUserByDeptId,getOaUser} from '@/api/user/userApi'
	export default {
		model:{
			prop: 'value', // 此处的value为父组件v-model绑定数据
			event: 'input' // 派发事件，事件名只能是input，否则无法生效
		},
		props: {
		    value:''
		},
		watch: {
		    async value(val) {
				console.log(val)
				// 获取activeUser数据
				let info = await getOaUser(val)
				this.activeUser = info.data
			}
		},
		data(){
			return {
				show:false,
				loading:false,
				columns:[],
				// 选中的人
				activeUser:{}
			}
		},
		methods:{
			clickOpen(){
				this.show = true;
			},
			async changeHandler(e){
				const {
					columnIndex,
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e;
				if (columnIndex === 0) {
					console.log(index)
					this.loading = true
					let info = await oaUserByDeptId(this.columns[columnIndex][index].id)
					console.log(info)
					picker.setColumnValues(1,info.data)
					this.loading = false
				}
			},
			// 获取部门数据
			async getDeptList(){
				let data = await getDeptSimpleList()
				this.columns = [data.data,[]];
			},
			// 点击确定
			confirm(e){
				console.log(e);
				this.$emit('input', e.value[1].id)
				this.activeUser = e.value[1]
				this.show = false
			},
			// 点击取消
			clickcancel(){
				this.show = false
			},
		},
		async created() {
			console.log(111)
			if(this.value){
				let info = await getOaUser(this.value)
				this.activeUser = info.data
			}
			this.getDeptList()
		}
	}
</script>

<style scoped lang="less">
	.box{
		display: flex;
		align-items: center;
		height: 100%;
		.button{
			width: 80px;
			height: 70%;
		}
	}
</style>